<template>
  <div class="book container">
    <div class="middle-container">
      <div class="search-container">
        <el-select v-model="select" placeholder="请选择" @change="typeSelect='';searchField='';">
          <el-option label="书名" value="name"></el-option>
          <el-option label="出版社" value="publishingHouse"></el-option>
          <el-option label="ISBN" value="isbn"></el-option>
          <el-option label="内容描述" value="description"></el-option>
        </el-select>
        <el-input
          placeholder="请输入内容"
          v-model="searchField"
          class="input-with-select"
        >
          <el-button
            slot="append"
            icon="el-icon-search"
            @click="getBooks()"
          ></el-button>
        </el-input>
      </div>
    </div>
    <div style="display: inline-flex; width: 100%">
      <div class="left-partial">
        <el-tree
          :data="typeTree"
          :props="defaultProps"
          default-expand-all
          @node-click="handleNodeClick"
        >
        </el-tree>
      </div>

      <div class="right-partial">
        <el-table
          :data="tableData"
          border
          style="width: 100%; margin-top: 1.75vw"
        >
          <el-table-column fixed prop="id" label="ID"> </el-table-column>
          <el-table-column prop="name" label="书名"> </el-table-column>
          <el-table-column prop="author" label="作者"> </el-table-column>
          <el-table-column prop="publishingHouse" label="出版社">
          </el-table-column>
          <el-table-column prop="recommended" label="是否推荐">
            <template slot-scope="scope">
              {{ scope.row.recommended == 1 ? "是" : "否" }}
            </template>
          </el-table-column>
          <el-table-column prop="onSale" label="是否上架">
            <template slot-scope="scope">
              {{ scope.row.onSale == 1 ? "是" : "否" }}
            </template>
          </el-table-column>
          <el-table-column prop="lended" label="是否借出">
            <template slot-scope="scope">
              <div :style="{ color: scope.row.lended == 1 ? 'red' : 'blue' }">
                {{ scope.row.lended == 1 ? "已借出" : "可租借" }}
              </div>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          :page-size="pageSize"
          :current-page.sync="pageNo"
          :total="total"
          layout="prev, pager, next"
          style="right: 2.5vw; position: absolute; margin-top: 1.5vw"
        >
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<style>
</style>

<script>
export default {
  data() {
    let baseImgurl = window.location.origin;
    return {
      baseImgurl,
      total: 0,
      pageNo: 1,
      pageSize: 8,
      select: "name",
      searchField: "",
      typeSelect: "",
      tableData: [],
      typeTree: [],
      defaultProps: {
        children: "child",
        label: "group",
      },
      query: {},
    };
  },
  methods: {
    handleNodeClick(select) {
      if (!select.child) {
        this.typeSelect = select.group.split(" ")[0];
        this.getBooks();
      }
    },
    getTree() {
      let that = this;
      let queryStr = this.$query.stringify(this.queryObj);
      this.$axios.get(`/api/v1/types/tree?${queryStr}`).then((data) => {
        that.$set(that, 'typeTree', data.tree)
      });
    },
    getBooks() {
      let that = this;
      let queryStr = this.$query.stringify(this.queryObj);
      this.$axios.get(`/api/v1/books?${queryStr}`).then((data) => {
        that.tableData = data.books;
        that.$cookies.remove("select");
        that.$cookies.remove("searchField");
        that.getTree();
      });
    },
  },
  computed: {
    queryObj() {
      let baseQuery = {
        pageNo: this.pageNo,
        pageSize: this.pageSize,
      };
      baseQuery[`${this.select}`] = this.searchField;
      baseQuery.type = this.typeSelect;
      return baseQuery;
    },
  },
  beforeMount() {
    if (this.$cookies.get("select")) {
      this.select = this.$cookies.get("select");
    }
    if (this.$cookies.get("searchField")) {
      this.searchField = this.$cookies.get("searchField");
    }
    this.getBooks();
    this.getTree();
  },
};
</script>
